<template>
  <div class="content">
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname" style="width:100px;">统计时段</div>
        <el-date-picker
          v-model="time"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          end-placeholder="结束月份"
        ></el-date-picker>
      </div>
      <div class="listitem" style="width:10%; margin-left:20px;">
        <el-button type="primary" @click="getaddpoint">数据分析</el-button>
      </div>
    </div>
    <div class="increase">
      <!-- <div class="headerh3">广告市场增长率分析</div> -->
      <div class="earchs" id="myChart1"></div>
    </div>
    <div class="increase">
      <div class="headerh3">当月分区域/行业广告费用分布情况</div>
      <div class="earchs earchs1" id="myChart2"></div>
    </div>
    <div class="increase2">
      <div class="left">
        <!-- <div class="headerh3">广告投放Top10品类</div> -->
        <div class="earchs earchs1" id="myChart3"></div>
      </div>
      <div class="left">
        <!-- <div class="headerh3" >广告投放Top10品牌</div> -->
        <div class="earchs earchs1" id="myChart4"></div>
      </div>
    </div>
    <div class="increase">
      <!-- <div class="headerh3">竞争媒体CPM对比分析</div> -->
      <div class="earchs earchs1" id="myChart5"></div>
    </div>
    <div style="width:100%;height:100px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import {
  advertising_market_growth,
  top,
  cpm_compared,
  month_area_money
} from "../../api/decision.js";
export default {
  data() {
    return {
      value3: "",
      time: [],
      //广告市场增长率分析
      echarts1: {
        title: {
          text: "广告市场增长率分析"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
         
        ]
      },
      //当月分区域/行业广告费用分布情况
      echarts2: {
        // title: {
        //   text: "当月分区域/行业广告费用分布情况"
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
           
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: 
          {
            type: "category",
            data: []
          }
        ,
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
      
         
        
        
          
        
        
        ]
      },
      echarts3: {}
    };
  },
  created() {
    this.getaddpoint();
    this.gettop10();
    this.getcpm_compared();
    this.getmonth_area_money()
  },
  mounted() {
    // this.drawLine1();
    // this.drawLine2();    
    // this.drawLine3();
    // this.drawLine4();
    // this.drawLine5();
  },
  methods: {
    //当月区域
    getmonth_area_money(){
      month_area_money().then(res=>{
        console.log(res)
        if(res.code==200){
          var legend=[]
          var series=[]
          res.data.forEach(element => {
            legend.push(element.name)
            var xAxis=[]
            var obj={
            name: element.name,
            type: "bar",
            stack: "广告",
            data: []
          }
            element.data.forEach(el => {
              xAxis.push(el.name)
              obj.data.push(el.val)
            });
            series.push(obj)
            this.echarts2.xAxis.data=xAxis
          });
            this.echarts2.series=series
            this.echarts2.legend.data=legend
  this.drawLine2()
        }
      })
    },
    //增长率分析
    getaddpoint() {
      let data = {
        start: this.time[0] ? this.time[0] : new Date().getFullYear() + "-01",
        end: this.time[1] ? this.time[1] : new Date().getFullYear() + "-12"
      };
      advertising_market_growth(data).then(res => {
        if (res.code == 200) {
          var series = [];
           var legend = [];
          res.data.forEach(element => {
           
            legend.push(element.name.name);
            var obj = {
              name: element.name.name,
              type: "line",
              data: []
            }
            var xAxis=[]
            element.data.forEach(el => {
              obj.data.push(el.val)
              xAxis.push(el.month+'月')
            });
            series.push(obj)
            //  console.log(xAxis)
            this.echarts1.xAxis.data=xAxis
          });
            this.echarts1.legend.data=legend
            this.echarts1.series=series
          this.drawLine1();

         
        }
      });
    },
    //cpm
    getcpm_compared() {
      cpm_compared().then(res => {
        if (res.code == 200) {
          // console.log(res)
          var obj = {
            title: {
              text: "竞争媒体CPM对比分析"
            },
            color: ["#3398DB"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: [
              {
                type: "value",
                name: "CPM"
              }
            ],
            series: {
              name: "品类",
              type: "bar",
              barWidth: "60%",
              data: [],
              itemStyle: {
                normal: {
                  color: function(param) {
                    // console.log(param)
                    if (param.data.class == 55) {
                      return "chocolate";
                    } else {
                      return "crimson";
                    }
                  }
                }
              }
            }
          };

          ///
          res.data.forEach(element => {
            obj.xAxis.data.push(element.channel);
            obj.series.data.push({
              name: element.channel,
              value: element.cpm,
              class: element.class_id
            });
          });
          this.drawLine5(obj);
        }
      });
    },
    gettop10() {
      top().then(res => {
        // console.log(res);
        if (res.code == 200) {
          var obj = {
            title: {
              text: "广告投放Top10品类"
            },
            color: ["#3398DB"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "1%",
              right: "1%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: [
              {
                type: "value",
                name: "广告花费"
              }
            ],
            series: {
              name: "品类",
              type: "bar",
              barWidth: "60%",
              data: [],
              itemStyle: {
                normal: {
                  color: function(param) {
                    // console.log(param)
                    if (
                      param.dataIndex == 0 ||
                      param.dataIndex == 1 ||
                      param.dataIndex == 2
                    ) {
                      return "chocolate";
                    } else {
                      return "crimson";
                    }
                  }
                }
              }
            }
          };
          //  console.log(res)
          res.data.industry.forEach(element => {
            obj.xAxis.data.push(element.get_industry.name);
            obj.series.data.push(element.count);
          });
          this.drawLine3(obj);
          var obj1 = {
            title: {
              text: "广告投放Top10品牌"
            },
            color: ["#3398DB"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "1%",
              right: "1%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "category",
              data: [],
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: [
              {
                type: "value",
                name: "广告花费"
              }
            ],
            series: {
              name: "品牌",
              type: "bar",
              barWidth: "60%",
              data: [],
              itemStyle: {
                normal: {
                  color: function(param) {
                    // console.log(param)
                    if (
                      param.dataIndex == 0 ||
                      param.dataIndex == 1 ||
                      param.dataIndex == 2
                    ) {
                      return "chocolate";
                    } else {
                      return "crimson";
                    }
                  }
                }
              }
            }
          };

          res.data.brand.forEach(element => {
            obj1.xAxis.data.push(element.brand);
            obj1.series.data.push(element.count);
          });
          this.drawLine4(obj1);
        }
      });
    },

    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption(this.echarts1);
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption(this.echarts2);
    },
    drawLine3(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine4(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart4"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine5(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart5"));
      // 绘制图表
      myChart.setOption(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 60px;
    }
    .listitem1 {
      width: 90px;
    }
  }
}
.increase {
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
  .earchs {
    width: 80%;
    margin: 0 auto;
    height: 300px;
    // background: red;
  }
  .earchs {
    width: 90%;
  }
}
.headerh3 {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}
.increase2 {
  width: 97%;
  height: 400px;
  display: flex;

  .left {
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
    .earchs {
      width: 80%;
      margin: 0 auto;
      height: 300px;
    }
    .earchs {
      width: 90%;
      // background: chocolate;
      // background: crimson;
    }
  }
}
</style>